<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <!-- addUser -->
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div style="width: 100%; display: flex">
          <div style="width: 50%">
            <el-form-item label="账号" prop="username">
              <el-input v-model="form.username" style="width: 80%"></el-input>
            </el-form-item>
          </div>
          <div style="width: 50%">
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" style="width: 80%"></el-input>
            </el-form-item>
          </div>
        </div>
        <div style="width: 100%; display: flex">
          <div style="width: 50%">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" style="width: 80%"></el-input>
            </el-form-item>
          </div>
          <div style="width: 50%">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="form.phone" style="width: 80%"></el-input>
            </el-form-item>
          </div>
        </div>
        <div style="width: 100%; display: flex">
          <div style="width: 50%">
            <el-form-item label="角色" prop="locat">
              <el-radio-group v-model="form.role">
                <el-radio label="1">管理层</el-radio>
                <el-radio label="0">普通员工</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
        <div style="width: 100%; display: flex">
          <el-button
            style="margin-left: auto"
            type="primary"
            size="small"
            @click="submit()"
            >提交</el-button
          >
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    var passwordEs = (rule, value, callback) => {
      if (value == "") {
        callback("密码不能为空");
      } else {
        callback();
      }
    };
    var usernameEs = (rule, value, callback) => {
      if (value == "") {
        callback("账号不能为空");
      } else {
        callback();
      }
    };
    var nameEs = (rule, value, callback) => {
      if (value == "") {
        callback("姓名不能为空");
      } else {
        callback();
      }
    };
    var phoneEs = (rule, value, callback) => {
      if (value == "") {
        callback("电话不能为空");
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      title: "",
      form: {
        username: "",
        password: "",
        name: "",
        phone: "",
        role: "1",
      },
      rules: {
        username: [{ required: true, validator: usernameEs, trigger: "blur" }],
        password: [{ required: true, validator: passwordEs, trigger: "blur" }],
        name: [{ required: true, validator: nameEs, trigger: "blur" }],
        phone: [{ required: true, validator: phoneEs, trigger: "blur" }],
      },
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.title == "职工信息添加") {
            this.$http.post("/postUser", this.form).then((res) => {
              console.log(res, "res");
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.dialogVisible = false;
                this.clear();
                this.$parent.$parent.pag.pageNo = 1;
                this.$parent.$parent.getlist({ pageNo: 1, pageSize: 5 });
              }
            });
          } else {
            this.$http.post("/updateUser", this.form).then((res) => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                this.dialogVisible = false;
                this.clear();
                this.$parent.$parent.pag.pageNo = 1;
                this.$parent.$parent.getlist({ pageNo: 1, pageSize: 5 });
              }
            });
          }
        }
      });
    },
    clear() {
      for (let keys in this.form) {
        if (keys == "role") {
          this.form[keys] = "1";
        } else {
          this.form[keys] = "";
        }
      }
      for (let keys in this.$parent.queryForm) {
        this.$parent.queryForm[keys] = "";
      }
    },
  },
};
</script>

<style>
</style>